<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | 文档</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ion icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- 主题风格 -->
    <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="style.css">

    <!-- HTML5 Shim and Respond.js IE8 支持HTML5元素和媒体查询 -->
    <!-- 警告: Respond.js 如果你通过 file:// 文件的方式查看将无法工作 -->
    <!--[if lt IE 9]>
        <script src="./resource/html5shiv.min.js"></script>
        <script src="./resource/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="skin-blue fixed" data-spy="scroll" data-target="#scrollspy">
    <div class="wrapper">

      <header class="main-header">
        <!-- Logo -->
        <!-- Logo -->
        <a href="../index2.html" class="logo">
          <!-- 侧边栏小logo 50x50 像素 -->
          <span class="logo-mini"><b>A</b>LT</span>
          <!-- 常规状态和移动端的logo -->
          <span class="logo-lg"><b>Admin</b>LTE</span>
        </a>
        <!-- 头部导航: 样式表可以再 header.less 中找到 -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- 导航栏切换按钮 -->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">导航切换</span>
          </a>
          <!-- 导航右侧菜单 -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <li><a href="http://almsaeedstudio.com">官方网站</a></li>
              <li><a href="http://almsaeedstudio.com/premium">高级模板</a></li>
            </ul>
          </div>
        </nav>
      </header>
      <!-- 左侧边栏. 包括 logo 和工具栏 -->
      <aside class="main-sidebar">
        <!-- 工具栏: 样式在 sidebar.less 文件中查看 -->
        <div class="sidebar" id="scrollspy">

          <!-- 侧边菜单 : 样式在 sidebar.less 文件中查看 -->
          <ul class="nav sidebar-menu">
            <li class="header">目录</li>
            <li class="active"><a href="#introduction"><i class="fa fa-circle-o"></i> 介绍</a></li>
            <li><a href="#download"><i class="fa fa-circle-o"></i> 下载</a></li>
            <li><a href="#dependencies"><i class="fa fa-circle-o"></i> 依赖</a></li>
            <li><a href="#advice"><i class="fa fa-circle-o"></i> 建议</a></li>
            <li><a href="#layout"><i class="fa fa-circle-o"></i> 布局</a></li>
            <li><a href="#adminlte-options"><i class="fa fa-circle-o"></i> Javascript 选项</a></li>
            <li class="treeview" id="scrollspy-components">
              <a href="javascript:void(0)"><i class="fa fa-circle-o"></i> 组件集</a>
              <ul class="nav treeview-menu">
                <li><a href="#component-main-header">主标题</a></li>
                <li><a href="#component-sidebar">侧边栏</a></li>
                <li><a href="#component-control-sidebar">侧边控制栏</a></li>
                <li><a href="#component-info-box">信息框</a></li>
                <li><a href="#component-box">容器</a></li>
                <li><a href="#component-direct-chat">即时聊天</a></li>
              </ul>
            </li>
            <li><a href="#plugins"><i class="fa fa-circle-o"></i> 插件集</a></li>
            <li><a href="#browsers"><i class="fa fa-circle-o"></i> 浏览器支持</a></li>
            <li><a href="#upgrade"><i class="fa fa-circle-o"></i> 升级指南</a></li>
            <li><a href="#implementations"><i class="fa fa-circle-o"></i> 程序实现</a></li>
            <li><a href="#faq"><i class="fa fa-circle-o"></i> 问题解答</a></li>
            <li><a href="#license"><i class="fa fa-circle-o"></i> 许可</a></li>
          </ul>
        </div>
        <!-- /.sidebar -->
      </aside>

      <!-- 内容包装. 包括页面内容 -->
      <div class="content-wrapper">
        <!-- 内容头部 (页面头部) -->
        <div class="content-header">
          <h1>
            AdminLTE 文档
            <small>Version 2.3</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
            <li class="active">文档</li>
          </ol>
        </div>

        <!-- 主体内容 -->
        <div class="content body">

<section id="introduction">
  <h2 class="page-header"><a href="#introduction">介绍</a></h2>
  <p class="lead">
    <b>AdminLTE</b> 是一个开源 WebApp 管理员控制台和工具面板,基于Bootstrap3框架开发的响应式 HTML 模板.
    对所有Bootstrap的组件和常用插件进行了风格一致性的重新设计，可作为程序后台的用户界面使用. AdminLTE
    基于模块化进行设计，因此允许用户能够容易的对其进行定制，这份文档将告诉你如何安装该模板，以及查看模板
    自带的组件如何进行使用.
  </p>
</section><!-- /#介绍 -->


<!-- ============================================================= -->

<section id="download">
  <h2 class="page-header"><a href="#download">下载</a></h2>
  <p class="lead">
    AdminLTE 提供了两种发行方式,使用者可以根据自己的技术水平选择使用.
  </p>
  <div class="row">
    <div class="col-sm-6">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">发行版</h3>
          <span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
        </div><!-- /.box-header -->
        <div class="box-body">
          <p>可用作生产环境的已编译版本. 如果你不想去定制 AdminLTE 的 LESS 文件,请下载这个版本.</p>
          <a href="http://almsaeedstudio.com/download/AdminLTE-dist" class="btn btn-primary"><i class="fa fa-download"></i> 下载</a>
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div><!-- /.col -->
    <div class="col-sm-6">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">Source Code</h3>
          <span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
        </div><!-- /.box-header -->
        <div class="box-body">
          <p>包括已编译CSS文件在内的所以文件. 如果你想要进行模板定制,请下载这个版本. <b>含 LESS 编译器.</b></p>
          <a href="http://almsaeedstudio.com/download/AdminLTE" class="btn btn-danger"><i class="fa fa-download"></i> 下载</a>
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
  <pre class="hierarchy bring-up"><code class="language-bash" data-lang="bash">源码包文件目录层次

AdminLTE/
├── dist/
│   ├── CSS/
│   ├── JS
│   ├── img
├── build/
│   ├── less/
│   │   ├── AdminLTE 的 Less 文件
│   └── Bootstrap-less/ (仅供参考. 未作任何改变)
│       ├── mixins/
│       ├── variables.less
│       ├── mixins.less
└── plugins/
    ├── 所有定制插件的 CSS 和 JS 文件</code></pre>
</section>


<!-- ============================================================= -->

<section id="dependencies">
  <h2 class="page-header"><a href="#dependencies">依赖</a></h2>
  <p class="lead">AdminLTE 依赖两种主流框架.
    可下载的包中已经包含了这两个库,因此你没必要手工进行下载.</p>
  <ul class="bring-up">
    <li><a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a></li>
    <li><a href="http://jquery.com/" target="_blank">jQuery 1.11+</a></li>
    <li><a href="#plugins">其他所有的插件列表</a></li>
  </ul>
</section>


<!-- ============================================================= -->

<section id="advice">
  <h2 class="page-header"><a href="#advice">建议</a></h2>
  <p class="lead">
    在你查看一个新的令人害怕的主题之前, 这里有一些关于如何熟悉它的技巧:
  </p>

  <ul>
    <li><b>AdminLTE 基于 <a href="http://getbootstrap.com/" target="_blank">Bootstrap 3</a>.</b> 如果你不熟悉 Bootstrap, 请通过链接访问它的网站并阅读相关文档. Bootstrap 所有的组件都被改进成和 AdminLTE 模板外观一致的风格来提供给使用者,以此来确保使用后的效果.</li>
    <li><b>通过主题自带的页面.</b> 当你需要快速去创建某些东西的时候,大部分模板示例页面能帮助你了解如何创建和使用组件.</li>
    <li><b>文档.</b> 我们会尽最大努力让你能够更好的使用 AdminLTE. 其中的一个方式就是提供文档支持. 如果你认为文档中是存在某些缺失的, 请不要犹豫的通过创建 issue 来告诉我们.</li>
    <li><b>使用 <a href="http://lesscss.org/" target="_blank">LESS</a> 构建.</b> 这个主题通过易于使用的 LESS 编译器进行构建. 如果你知道 CSS 或者 SASS 的话, LESS是很容易掌握的. 学习 LESS 并不是必须的,但是在将来会对你很有用.</li>
    <li><b>项目 <a href="https://github.com/almasaeed2010/AdminLTE/" target="_blank">GitHub</a> 主页.</b> 访问我们的GitHub库中查看问题，或者提出要求以及有助于项目的建议.</li>
  </ul>
  <p>
    <b>提示:</b> 编写 LESS 文件比 CSS 的方式有着更好的评价.
  </p>
</section>


<!-- ============================================================= -->

<section id="layout">
  <h2 class="page-header"><a href="#layout">布局</a></h2>
  <p class="lead">布局主要由四个部分构成:</p>
  <ul>
    <li>包裹器 <code>.wrapper</code>. 一个包裹了整个站点的div元素.</li>
    <li>主标题 <code>.main-header</code>. 包括 Logo 和导航栏.</li>
    <li>侧边栏 <code>.sidebar-wrapper</code>. 包括用户面板和侧边菜单.</li>
    <li>内容 <code>.content-wrapper</code>. 包括页面头部和页面内容.</li>
  </ul>
  <div class="callout callout-danger lead">
    <h4>提示!</h4>
    <p>如果你想要从头开始建立你的引用程序, 查看 <a href="../starter.html">入门页面</a> 是一个很好的方式.</p>
  </div>

  <h3>布局选项</h3>
  <p class="lead">AdminLTE 2.0 提供了一组选项来方便你定义主体布局. 可以将以下任意一个或多个class名称添加到body元素的class中,以此来获得对应的效果.</p>
  <ul>
    <li><b>固定的:</b> 使用这个类 <code>.fixed</code> 可以使头部和侧边栏变成固定.</li>
    <li><b>折叠侧边栏:</b> 使用这个类 <code>.sidebar-collapse</code> 使得侧边栏在加载的时候有个折叠效果.</li>
    <li><b>盒装布局:</b> 使用这个类 <code>.layout-boxed</code> 使得页面宽度固定位 1250px, 不再随页面宽度适应.</li>
    <li><b>顶部导航</b> 使用这个类 <code>.layout-top-nav</code> 异常侧边栏和顶部导航中你的链接.</li>
  </ul>
  <p><b>通知:</b> 你不能同时使用 layout-boxed 和 fixed. 否则一些元素可能会错乱混合.</p>

  <h3>皮肤</h3>
  <p class="lead">皮肤在 dist/css/skins 目录下能够找到.
    选择你想要添加的皮肤文件，然后将相应的类添加到body元素的class属性中，这样模板的呈现效果就会被改变.
    以下列举了默认可以使用的皮肤:</p>
  <div class="box box-solid" style="max-width: 300px;">
    <div class="box-body no-padding">
      <table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
        <thead>
          <tr>
            <th style="width: 210px;">皮肤类</th>
            <th>效果演示</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>skin-blue</code></td>
            <td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-blue-light</code></td>
            <td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-yellow</code></td>
            <td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-yellow-light</code></td>
            <td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-green</code></td>
            <td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-green-light</code></td>
            <td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-purple</code></td>
            <td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-purple-light</code></td>
            <td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-red</code></td>
            <td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-red-light</code></td>
            <td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-black</code></td>
            <td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
          <tr>
            <td><code>skin-black-light</code></td>
            <td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
          </tr>
        </tbody>
      </table>
    </div><!-- /.box-body -->
  </div><!-- /.box -->
</section>


<!-- ============================================================= -->

<section id="adminlte-options">
  <h2 class="page-header"><a href="#adminlte-options">AdminLTE Javascript 选项</a></h2>
  <p class="lead">可以使用以下方式之一修改 AdminLTE 的 app.js 文件中的选项.</p>

  <h3>编辑 app.js 文件</h3>
  <p>在主要的Javascript文件中, 修改 <code>$.AdminLTE.options</code> 对象内容来适应你自己的情况.</p>

  <h3>定义 AdminLTEOptions</h3>
  <p>另外, 你可以在加载 app.js 文件之前定义一个全局变量名为 <code>AdminLTEOptions</code> 的对象来进行初始化.</p>
  <p>举例</p>
  <pre class="prettyprint"><code class="html">&LT;script>
  var AdminLTEOptions = {
    // 开启侧边栏最小化后的鼠标悬停扩展选项的效果
    // 该效果强制和固定布局以及最小化侧边栏同时启用
    sidebarExpandOnHover: true,
    // BoxRefresh 插件
    enableBoxRefresh: true,
    // Bootstrap.js 提示工具
    enableBSToppltip: true
  };
&LT;/script>
&LT;script src="dist/js/app.js" type="text/javascript">&LT;/script></code></pre>

  <h3>可用的 AdminLTE 选项</h3>
  <pre class="prettyprint"><code class="javascript">{
  // 给到导航栏添加 slimscroll 插件
  navbarMenuSlimscroll: true,
  navbarMenuSlimscrollWidth: "3px", // 滚动条宽度
  navbarMenuHeight: "200px", // 内菜单高度
  // 设置一般情况下 animation 动画效果，例如元素折叠或展开，
  // 树形菜单下拉或收起的素的速度，该选项可以设置一个毫秒整数,
  // 或者设置为 'fast', 'normal', 'slow' 字符串
  animationSpeed: 500,
  // 通过选择器指定侧边栏展开收起的切换按钮元素
  sidebarToggleSelector: "[data-toggle='offcanvas']",
  // 激活推送菜单
  sidebarPushMenu: true,
  // 激活菜单栏的 slimscroll ,(要求固定布局和引入了 SlimScroll 插件)
  sidebarSlimScroll: true,
  // 开启侧边栏最小化后的鼠标悬停扩展选项的效果
  // 该效果强制和固定布局以及最小化侧边栏同时启用
  sidebarExpandOnHover: false,
  // BoxRefresh 插件
  enableBoxRefresh: true,
  // Bootstrap.js 提示工具
  enableBSToppltip: true,
  BSTooltipSelector: "[data-toggle='tooltip']",
  // 启用快速点击. Fastclick.js 创造了一个更适合触摸设备的本地环境
  // 如果你要启用该插件，请确保在AdminLTE 的 app.js 之前加载你的脚本
  enableFastclick: true,
  // 启用树状视图控制栏
  enableControlTreeView: true,
  // 启用控制侧边栏选项
  enableControlSidebar: true,
  controlSidebarOptions: {
    // 指定哪个按钮会触发侧边栏开关时间
    toggleBtnSelector: "[data-toggle='control-sidebar']",
    // 侧边栏选择
    selector: ".control-sidebar",
    // 启用幻灯片内容
    slide: true
  },
  // Box Widget 插件. 启用改插件可以进行折叠和移除
  enableBoxWidget: true,
  // Box Widget 插件选项
  boxWidgetOptions: {
    boxWidgetIcons: {
      // 折叠图标
      collapse: 'fa-minus',
      // 打开图标
      open: 'fa-plus',
      // 移除图标
      remove: 'fa-times'
    },
    boxWidgetSelectors: {
      // 移除按钮选项
      remove: '[data-widget="remove"]',
      // 折叠按钮选项
      collapse: '[data-widget="collapse"]'
    }
  },
  // 即时聊天插件选项
  directChat: {
    // 默认开启
    enable: true,
    // 打开和关闭联系人按钮
    contactToggleSelector: '[data-widget="chat-pane-toggle"]'
  },
  // 定义站点全局使用的颜色集合
  colors: {
    lightBlue: "#3c8dbc",
    red: "#f56954",
    green: "#00a65a",
    aqua: "#00c0ef",
    yellow: "#f39c12",
    blue: "#0073b7",
    navy: "#001F3F",
    teal: "#39CCCC",
    olive: "#3D9970",
    lime: "#01FF70",
    orange: "#FF851B",
    fuchsia: "#F012BE",
    purple: "#8E24AA",
    maroon: "#D81B60",
    black: "#222222",
    gray: "#d2d6de"
  },
  // bootstrap 使用的标准屏幕发大小,你可以在 variables.less 文件中修改,
  // 也可以在这里进行修改
  screenSizes: {
    xs: 480,
    sm: 768,
    md: 992,
    lg: 1200
  }
}</code></pre>
</section>


<!-- ============================================================= -->

<section id="components" data-spy="scroll" data-target="#scrollspy-components">
  <h2 class="page-header"><a href="#components">组件集</a></h2>
  <div class="callout callout-info lead">
    <h4>提醒!</h4>
    <p>
      AdminLTE 使用 Bootstrap 3 的所有组件. 所以你最好先去回顾 <a href="http://getbootstrap.com">Bootstrap 文档</a> 中的内容来了解组件的使用，而本文档中<b>不包含</b> 该部分内容.
    </p>
  </div>
  <div class="callout callout-danger lead">
    <h4>提示!</h4>
    <p>
      如果你想要通过示例页面的内容去复制一个组件, 在元素上单击鼠标右键选择 "inspect element" 去得到HTML代码要比你浏览整个文件要快得多.
    </p>
  </div>
  <h3 id="component-main-header">主标题</h3>
  <p class="lead">主标题包括Logo和导航栏. 由于 Bootstrap 并未提供该组件, 因此导航栏的结构和 Bootstrap 中不同.
    导航栏有两种结构,这边我们提供的是常规导航的示例,接下来提供另一种置顶导航的布局方式.</p>
  <div class="box box-solid">
    <div class="box-body" style="position: relative;">
      <span class="eg">主标题示例</span>
      <header class="main-header" style="position: relative;">
        <!-- Logo -->
        <a href="index2.html" class="logo" style="position: relative;"><b>Admin</b>LTE</a>
        <!-- 头部导航: 在 header.less 中查阅样式 -->
        <nav class="navbar" role="navigation" style="border: 0;max-height: 50px;">
          <!-- 导航栏切换按钮 -->
          <a href="#" class="sidebar-toggle" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>
          <!-- 导航栏右侧菜单 -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- 消息菜单: 在 dropdown.less 中查看代码 -->
              <li class="dropdown messages-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-envelope-o"></i>
                  <span class="label label-success">4</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有 4 条消息</li>
                  <li>
                    <!-- 内部菜单: 包括实际数据 -->
                    <ul class="menu">
                      <li><!-- 消息开始 -->
                        <a href="#">
                          <div class="pull-left">
                            <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                          </div>
                          <h4>
                            李四
                            <small><i class="fa fa-clock-o"></i> 5 分钟前</small>
                          </h4>
                          <p>为什么不使用这个新主题?</p>
                        </a>
                      </li><!-- 消息结束 -->
                    </ul>
                  </li>
                  <li class="footer"><a href="#">查看所有消息</a></li>
                </ul>
              </li>
              <!-- 通知: 在 dropdown.less 中查看样式 -->
              <li class="dropdown notifications-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-bell-o"></i>
                  <span class="label label-warning">10</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有 10 条通知</li>
                  <li>
                    <!-- 内部菜单: 包含真实数据 -->
                    <ul class="menu">
                      <li>
                        <a href="#">
                          <i class="fa fa-users text-aqua"></i> 今天又 5 个新注册用户
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="footer"><a href="#">查看所有</a></li>
                </ul>
              </li>
              <!-- 任务: 在 dropdown.less 中查看样式 -->
              <li class="dropdown tasks-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-flag-o"></i>
                  <span class="label label-danger">9</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有 9 项任务</li>
                  <li>
                    <!-- 内部菜单: 包括真是数据 -->
                    <ul class="menu">
                      <li><!-- 开始任务队列 -->
                        <a href="#">
                          <h3>
                            设计一组按钮
                            <small class="pull-right">20%</small>
                          </h3>
                          <div class="progress xs">
                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              <span class="sr-only">20% 完成</span>
                            </div>
                          </div>
                        </a>
                      </li><!--结束任务队列 -->
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">查看所有任务</a>
                  </li>
                </ul>
              </li>
              <!-- 用户账户: 在 dropdown.less 中查看样式 -->
              <li class="dropdown user user-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
                  <span class="hidden-xs">张三</span>
                </a>
                <ul class="dropdown-menu">
                  <!-- 用户头像 -->
                  <li class="user-header">
                    <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    <p>
                      张三 - 网页开发者
                      <small>注册时间 Nov. 2012</small>
                    </p>
                  </li>
                  <!-- Menu Body -->
                  <li class="user-body">
                    <div class="col-xs-4 text-center">
                      <a href="#">下属</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">业绩</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">好友</a>
                    </div>
                  </li>
                  <!-- 底部菜单 -->
                  <li class="user-footer">
                    <div class="pull-left">
                      <a href="#" class="btn btn-default btn-flat">概况</a>
                    </div>
                    <div class="pull-right">
                      <a href="#" class="btn btn-default btn-flat">退出</a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
      </header>
    </div>
  </div>
  <pre class="prettyprint">
      &LT;header class="main-header" style="position: relative;">
        &LT;!-- Logo -->
        &LT;a href="index2.html" class="logo" style="position: relative;">&LT;b>Admin&LT;/b>LTE&LT;/a>
        &LT;!-- 头部导航: 在 header.less 中查阅样式 -->
        &LT;nav class="navbar" role="navigation" style="border: 0;max-height: 50px;">
          &LT;!-- 导航栏切换按钮 -->
          &LT;a href="#" class="sidebar-toggle" role="button">
            &LT;span class="sr-only">Toggle navigation&LT;/span>
          &LT;/a>
          &LT;!-- 导航栏右侧菜单 -->
          &LT;div class="navbar-custom-menu">
            &LT;ul class="nav navbar-nav">
              &LT;!-- 消息菜单: 在 dropdown.less 中查看代码 -->
              &LT;li class="dropdown messages-menu">
                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  &LT;i class="fa fa-envelope-o">&LT;/i>
                  &LT;span class="label label-success">4&LT;/span>
                &LT;/a>
                &LT;ul class="dropdown-menu">
                  &LT;li class="header">你有 4 条消息&LT;/li>
                  &LT;li>
                    &LT;!-- 内部菜单: 包括实际数据 -->
                    &LT;ul class="menu">
                      &LT;li>&LT;!-- 消息开始 -->
                        &LT;a href="#">
                          &LT;div class="pull-left">
                            &LT;img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                          &LT;/div>
                          &LT;h4>
                            李四
                            &LT;small>&LT;i class="fa fa-clock-o">&LT;/i> 5 分钟前&LT;/small>
                          &LT;/h4>
                          &LT;p>为什么不使用这个新主题?&LT;/p>
                        &LT;/a>
                      &LT;/li>&LT;!-- 消息结束 -->
                    &LT;/ul>
                  &LT;/li>
                  &LT;li class="footer">&LT;a href="#">查看所有消息&LT;/a>&LT;/li>
                &LT;/ul>
              &LT;/li>
              &LT;!-- 通知: 在 dropdown.less 中查看样式 -->
              &LT;li class="dropdown notifications-menu">
                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  &LT;i class="fa fa-bell-o">&LT;/i>
                  &LT;span class="label label-warning">10&LT;/span>
                &LT;/a>
                &LT;ul class="dropdown-menu">
                  &LT;li class="header">你有 10 条通知&LT;/li>
                  &LT;li>
                    &LT;!-- 内部菜单: 包含真实数据 -->
                    &LT;ul class="menu">
                      &LT;li>
                        &LT;a href="#">
                          &LT;i class="fa fa-users text-aqua">&LT;/i> 今天又 5 个新注册用户
                        &LT;/a>
                      &LT;/li>
                    &LT;/ul>
                  &LT;/li>
                  &LT;li class="footer">&LT;a href="#">查看所有&LT;/a>&LT;/li>
                &LT;/ul>
              &LT;/li>
              &LT;!-- 任务: 在 dropdown.less 中查看样式 -->
              &LT;li class="dropdown tasks-menu">
                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  &LT;i class="fa fa-flag-o">&LT;/i>
                  &LT;span class="label label-danger">9&LT;/span>
                &LT;/a>
                &LT;ul class="dropdown-menu">
                  &LT;li class="header">你有 9 项任务&LT;/li>
                  &LT;li>
                    &LT;!-- 内部菜单: 包括真是数据 -->
                    &LT;ul class="menu">
                      &LT;li>&LT;!-- 开始任务队列 -->
                        &LT;a href="#">
                          &LT;h3>
                            设计一组按钮
                            &LT;small class="pull-right">20%&LT;/small>
                          &LT;/h3>
                          &LT;div class="progress xs">
                            &LT;div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              &LT;span class="sr-only">20% 完成&LT;/span>
                            &LT;/div>
                          &LT;/div>
                        &LT;/a>
                      &LT;/li>&LT;!--结束任务队列 -->
                    &LT;/ul>
                  &LT;/li>
                  &LT;li class="footer">
                    &LT;a href="#">查看所有任务&LT;/a>
                  &LT;/li>
                &LT;/ul>
              &LT;/li>
              &LT;!-- 用户账户: 在 dropdown.less 中查看样式 -->
              &LT;li class="dropdown user user-menu">
                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  &LT;img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
                  &LT;span class="hidden-xs">张三&LT;/span>
                &LT;/a>
                &LT;ul class="dropdown-menu">
                  &LT;!-- 用户头像 -->
                  &LT;li class="user-header">
                    &LT;img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    &LT;p>
                      张三 - 网页开发者
                      &LT;small>注册时间 Nov. 2012&LT;/small>
                    &LT;/p>
                  &LT;/li>
                  &LT;!-- Menu Body -->
                  &LT;li class="user-body">
                    &LT;div class="col-xs-4 text-center">
                      &LT;a href="#">下属&LT;/a>
                    &LT;/div>
                    &LT;div class="col-xs-4 text-center">
                      &LT;a href="#">业绩&LT;/a>
                    &LT;/div>
                    &LT;div class="col-xs-4 text-center">
                      &LT;a href="#">好友&LT;/a>
                    &LT;/div>
                  &LT;/li>
                  &LT;!-- 底部菜单 -->
                  &LT;li class="user-footer">
                    &LT;div class="pull-left">
                      &LT;a href="#" class="btn btn-default btn-flat">概况&LT;/a>
                    &LT;/div>
                    &LT;div class="pull-right">
                      &LT;a href="#" class="btn btn-default btn-flat">退出&LT;/a>
                    &LT;/div>
                  &LT;/li>
                &LT;/ul>
              &LT;/li>
            &LT;/ul>
          &LT;/div>
        &LT;/nav>
      &LT;/header>
  </pre>
  <h4>顶部导航布局. 主标题示例.</h4>
  <div class="callout callout-info lead">
    <h4>提示!</h4>
    <p>去使用这种方式的主标题而不是普通方式, 你需要往body元素的class属性中添加 <code>layout-top-nav</code> 类.</p>
  </div>
  <div class="box box-solid">
    <div class="box-body layout-top-nav">
      <span class="eg">顶部导航示例</span>
      <header class="main-header">
        <nav class="navbar navbar-static-top">
          <div class="container-fluid">
            <div class="navbar-header">
              <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                <i class="fa fa-bars"></i>
              </button>
            </div>

            <!-- 集合链接导航,表单和其他内容的切换 -->
            <div class="collapse navbar-collapse" id="navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">链接 <span class="sr-only">(选中)</span></a></li>
                <li><a href="#">链接</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">选项</a></li>
                    <li><a href="#">另一个选项</a></li>
                    <li><a href="#">其他选项</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">更多分离的链接</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="navbar-search-input" placeholder="搜索">
                </div>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">链接</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">选项</a></li>
                    <li><a href="#">另一个选项</a></li>
                    <li><a href="#">其他选项</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
      </header>
    </div>
  </div>
  <pre class="prettyprint">
      &LT;header class="main-header">
        &LT;nav class="navbar navbar-static-top">
          &LT;div class="container-fluid">
            &LT;div class="navbar-header">
              &LT;a href="../../index2.html" class="navbar-brand">&LT;b>Admin&LT;/b>LTE&LT;/a>
              &LT;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                &LT;i class="fa fa-bars">&LT;/i>
              &LT;/button>
            &LT;/div>

            &LT;!-- 集合链接导航,表单和其他内容的切换 -->
            &LT;div class="collapse navbar-collapse" id="navbar-collapse">
              &LT;ul class="nav navbar-nav">
                &LT;li class="active">&LT;a href="#">链接 &LT;span class="sr-only">(选中)&LT;/span>&LT;/a>&LT;/li>
                &LT;li>&LT;a href="#">链接&LT;/a>&LT;/li>
                &LT;li class="dropdown">
                  &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 &LT;span class="caret">&LT;/span>&LT;/a>
                  &LT;ul class="dropdown-menu" role="menu">
                    &LT;li>&LT;a href="#">选项&LT;/a>&LT;/li>
                    &LT;li>&LT;a href="#">另一个选项&LT;/a>&LT;/li>
                    &LT;li>&LT;a href="#">其他选项&LT;/a>&LT;/li>
                    &LT;li class="divider">&LT;/li>
                    &LT;li>&LT;a href="#">分离的链接&LT;/a>&LT;/li>
                    &LT;li class="divider">&LT;/li>
                    &LT;li>&LT;a href="#">更多分离的链接&LT;/a>&LT;/li>
                  &LT;/ul>
                &LT;/li>
              &LT;/ul>
              &LT;form class="navbar-form navbar-left" role="search">
                &LT;div class="form-group">
                  &LT;input type="text" class="form-control" id="navbar-search-input" placeholder="搜索">
                &LT;/div>
              &LT;/form>
              &LT;ul class="nav navbar-nav navbar-right">
                &LT;li>&LT;a href="#">链接&LT;/a>&LT;/li>
                &LT;li class="dropdown">
                  &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 &LT;span class="caret">&LT;/span>&LT;/a>
                  &LT;ul class="dropdown-menu" role="menu">
                    &LT;li>&LT;a href="#">选项&LT;/a>&LT;/li>
                    &LT;li>&LT;a href="#">另一个选项&LT;/a>&LT;/li>
                    &LT;li>&LT;a href="#">其他选项&LT;/a>&LT;/li>
                    &LT;li class="divider">&LT;/li>
                    &LT;li>&LT;a href="#">分离的链接&LT;/a>&LT;/li>
                  &LT;/ul>
                &LT;/li>
              &LT;/ul>
            &LT;/div>&LT;!-- /.navbar-collapse -->
          &LT;/div>&LT;!-- /.container-fluid -->
        &LT;/nav>
      &LT;/header>
  </pre>

  <!-- ===================================================================== -->

  <h3 id="component-sidebar">侧边栏</h3>
  <p class="lead">
    这个页面左侧得侧边栏提供了一个样例.
    侧边栏的结构:
  </p>
  <pre class="prettyprint">
&LT;div class="main-sidebar">
  &LT;!-- 侧边栏内部 -->
  &LT;div class="sidebar">
    &LT;!-- 用户工具 (可选) -->
    &LT;div class="user-panel">
      &LT;div class="pull-left image">
        &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
      &LT;/div>
      &LT;div class="pull-left info">
        &LT;p>U用户名&LT;/p>

        &LT;a href="#">&LT;i class="fa fa-circle text-success">&LT;/i> 在线&LT;/a>
      &LT;/div>
    &LT;/div>&LT;!-- /.user-panel -->

    &LT;!-- 搜索表单 (可选) -->
    &LT;form action="#" method="get" class="sidebar-form">
      &LT;div class="input-group">
        &LT;input type="text" name="q" class="form-control" placeholder="Search...">
        &LT;span class="input-group-btn">
          &LT;button type="submit" name="search" id="search-btn" class="btn btn-flat">&LT;i class="fa fa-search">&LT;/i>&LT;/button>
        &LT;/span>
      &LT;/div>
    &LT;/form>&LT;!-- /.sidebar-form -->

    &LT;!-- 侧边菜单 -->
    &LT;ul class="sidebar-menu">
      &LT;li class="header">头部&LT;/li>
      &LT;!-- 可选，给链接添加图标 -->
      &LT;li class="active">&LT;a href="#">&LT;span>链接&LT;/span>&LT;/a>&LT;&LT;/li>
      &LT;li>&LT;a href="#">&LT;span>另一个链接&LT;/span>&LT;/a>&LT;/li>
      &LT;li class="treeview">
        &LT;a href="#">&LT;span>多级&LT;/span> &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
        &LT;ul class="treeview-menu">
          &LT;li>&LT;a href="#">二级链接&LT;/a>&LT;/li>
          &LT;li>&LT;a href="#">二级链接&LT;/a>&LT;/li>
        &LT;/ul>
      &LT;/li>
    &LT;/ul>&LT;!-- /.sidebar-menu -->

  &LT;/div>&LT;!-- /.sidebar -->
&LT;/div>&LT;!-- /.main-sidebar --></pre>

  <h3 id="component-control-sidebar">控制栏</h3>
  <p class="lead">控制栏是右侧边栏. 它可以很容易的创建和用来实现许多功能. 侧边栏有隐藏/显示两种效果.
    首先侧边栏允许覆盖在内容上面. 也可以直接占据右侧边部分空间.
    这些功能都可以通过 <a href="#adminlte-options">Javascript选项</a>进行设置.</p>
  <p class="lead">以下代码应该被防止在类名为 <code>.wrapper</code> 的div元素内.
    我更推荐放置在footer后.</p>
  <p class="lead">暗色侧边栏</p>
<pre class="prettyprint"><code class="lang-html">&LT;!-- 右侧边栏 -->
&LT;aside class="control-sidebar control-sidebar-dark">
  &LT;!-- 侧边栏的内容在这里 -->
&LT;/aside>
&LT;!-- 侧边栏的背景 -->
&LT;!-- 这个 div 必须被放置在它工作位置的后边 -->
&LT;div class="control-sidebar-bg">&LT;/div></code></pre>

  <p class="lead">亮色侧边栏</p>
<pre class="prettyprint"><code class="lang-html">&LT;!-- 右侧边栏 -->
&LT;aside class="control-sidebar control-sidebar-light">
  &LT;!-- 侧边栏的内容在这里 -->
&LT;/aside>
&LT;!-- 侧边栏的背景 -->
&LT;!-- 这个 div 必须被放置在它工作位置的后边 -->
&LT;div class="control-sidebar-bg">&LT;/div></code></pre>

  <p class="lead">当你成功创建侧边栏后，你需要通过一个按钮控制它的开启或关闭.
    可以通过添加 <code>data-toggle="control-sidebar"</code> 属性去指定任意按钮,
    它会自动将该按钮作为开关控制的按钮.</p>

  <p class="lead">切换按钮示例</p>
  <button class="btn btn-primary" data-toggle="control-sidebar">右侧边栏切换</button><br><br>

  <p class="lead">右侧边栏标记</p>
  <pre class="prettyprint"><code class="lang-html">&LT;button class="btn btn-default" data-toggle="control-sidebar">右侧边栏切换&LT;/button></code></pre>
  <!-- ===================================================================== -->

  <h3 id="component-info-box">信息框</h3>
  <p class="lead">信息框常用于统计片段信息的现实. 有两种类型的信息框.</p>
  <h4>第一种类型的信息框</h4>
  <!-- Info Boxes -->
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">消息</span>
          <span class="info-box-number">1,410</span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">书签</span>
          <span class="info-box-number">410</span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">上传</span>
          <span class="info-box-number">13,648</span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">收藏</span>
          <span class="info-box-number">93,139</span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">代码</p>
  <pre class="prettyprint"><code class="lang-html">&LT;div class="info-box">
  &LT;!-- 通过添加 bg-* 类来设置图标颜色 -->
  &LT;span class="info-box-icon bg-red">&LT;i class="fa fa-star-o">&LT;/i>&LT;/span>
  &LT;div class="info-box-content">
    &LT;span class="info-box-text">收藏&LT;/span>
    &LT;span class="info-box-number">93,139&LT;/span>
  &LT;/div>&LT;!-- /.info-box-content -->
&LT;/div>&LT;!-- /.info-box --></code></pre>

  <h4>第二种类型的信息框</h4>
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box bg-aqua">
        <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">书签</span>
          <span class="info-box-number">41,410</span>
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
            在 30 天内增加 70%
          </span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box bg-green">
        <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">收藏</span>
          <span class="info-box-number">41,410</span>
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
            在 30 天内增加 70%
          </span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box bg-yellow">
        <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">事件</span>
          <span class="info-box-number">41,410</span>
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
            在 30 天内增加 70%
          </span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box bg-red">
        <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">提交</span>
          <span class="info-box-number">41,410</span>
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
            在 30 天内增加 70%
          </span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">标签</p>
  <pre class="prettyprint"><code class="lang-html">&LT;!-- 通过添加 bg-* 类去设置信息框颜色 -->
&LT;div class="info-box bg-red">
  &LT;span class="info-box-icon">&LT;i class="fa fa-comments-o">&LT;/i>&LT;/span>
  &LT;div class="info-box-content">
    &LT;span class="info-box-text">收藏&LT;/span>
    &LT;span class="info-box-number">41,410&LT;/span>
    &LT;!-- 进度条部分是可选的 -->
    &LT;div class="progress">
      &LT;div class="progress-bar" style="width: 70%">&LT;/div>
    &LT;/div>
    &LT;span class="progress-description">
    在 30 天内增加 70%
    &LT;/span>
  &LT;/div>&LT;!-- /.info-box-content -->
&LT;/div>&LT;!-- /.info-box --></code></pre>
  <p class="lead">在两种风格样式间进行切换，你唯一要做的就是改变 bg-* 类的放置.
    对于第一种是在图标上添加 bg-* 类. 而另一种样式是在代表信息框的 div 元素上添加 bg-* 类.</p>
  <!-- ===================================================================== -->

  <h3 id="component-box">容器</h3>
  <p class="lead">在这个份模板中,容器组件是最常见的组件.
    你可以它来作为任何图表或文本的容器进行显示.
    在下面的内容中我们展示了它的多种风格形式.</p>
  <h4>默认容器标签</h4>
  <div class="box">
    <div class="box-header with-border">
      <h3 class="box-title">默认容器样式</h3>
      <div class="box-tools pull-right">
        <!-- 按钮, 标签, 和任何其他元素可以再此处放置! -->
        <!-- 这里是一个标签的举例 -->
        <span class="label label-primary">标签</span>
      </div><!-- /.box-tools -->
    </div><!-- /.box-header -->
    <div class="box-body">
      容器主体部分
    </div><!-- /.box-body -->
    <div class="box-footer">
      容器底脚部分
    </div><!-- box-footer -->
  </div><!-- /.box -->
  <pre class="prettyprint">&LT;div class="box">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">默认容器样式&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;!-- 按钮, 标签, 和任何其他元素可以再此处放置! -->
      &LT;!-- 这里是一个标签的举例 -->
      &LT;span class="label label-primary">标签&LT;/span>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    容器主体部分
  &LT;/div>&LT;!-- /.box-body -->
  &LT;div class="box-footer">
    容器底脚部分
  &LT;/div>&LT;!-- box-footer -->
&LT;/div>&LT;!-- /.box --></pre>
  <h4>容器变形</h4>
  <p class="lead">你可以通过添加上下文类添加不同效果.</p>
  <div class="row">
    <div class="col-md-4">
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">默认容器举例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">主要容器举例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">信息容器举例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="clearfix"></div>
    <div class="col-md-4">
      <div class="box box-warning">
        <div class="box-header with-border">
          <h3 class="box-title">警告容器举例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-success">
        <div class="box-header with-border">
          <h3 class="box-title">成果容器举例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">危险容器举例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
  </div><!-- /.row -->
  <pre class="prettyprint">&LT;div class="box box-default">...&LT;/div>
&LT;div class="box box-primary">...&LT;/div>
&LT;div class="box box-info">...&LT;/div>
&LT;div class="box box-warning">...&LT;/div>
&LT;div class="box box-success">...&LT;/div>
&LT;div class="box box-danger">...&LT;/div></pre>

  <h4>实心容器</h4>
  <p class="lead">实心容器是容器的另一种显示风格.
    可以通过向容器元素中添加 box-solid 类进行创建.
    你也可以通过你容器的上下文进行创建.</p>
  <div class="row">
    <div class="col-md-4">
      <div class="box box-solid box-default">
        <div class="box-header">
          <h3 class="box-title">默认实心容器示例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-solid box-primary">
        <div class="box-header">
          <h3 class="box-title">主要实心容器示例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-solid box-info">
        <div class="box-header">
          <h3 class="box-title">信息实心容器示例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="clearfix"></div>
    <div class="col-md-4">
      <div class="box box-solid box-warning">
        <div class="box-header">
          <h3 class="box-title">警告实心容器示例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-solid box-success">
        <div class="box-header">
          <h3 class="box-title">成功实心容器示例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
    <div class="col-md-4">
      <div class="box box-solid box-danger">
        <div class="box-header">
          <h3 class="box-title">危险实心容器示例</h3>
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div>
  </div><!-- /.row -->
  <pre class="prettyprint">
&LT;div class="box box-solid box-default">...&LT;/div>
&LT;div class="box box-solid box-primary">...&LT;/div>
&LT;div class="box box-solid box-info">...&LT;/div>
&LT;div class="box box-solid box-warning">...&LT;/div>
&LT;div class="box box-solid box-success">...&LT;/div>
&LT;div class="box box-solid box-danger">...&LT;/div></pre>
  <h4>容器工具条</h4>
  <p class="lead">容器可以明确包括一个工具条去提供一个功能使用或进行信息说明的标注.
    以下示例展示了使用多个 AdminLTE 组件在容器头部内进行显示.</p>
  <p>AdminLTE 的 data-widget 属性提供了容器关闭和移除的功能.
    按钮组被放置在容器头部的工具条中.</p>
  <pre class="prettyprint">
&LT;!-- 这会导致容器点击后被移除 -->
&LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
&LT;!-- This will cause the box to collapse when clicked -->
&LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button></pre>
  <div class="row">
    <div class="col-md-4">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">可折叠容器</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">可折叠容器&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    容器主体部分
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div>
    <div class="col-md-4">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">可移除容器</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">可移除容器&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;button class="btn btn-box-tool" data-widget="remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    容器主体部分
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div>
    <div class="col-md-4">
      <div class="box box-default collapsed-box">
        <div class="box-header with-border">
          <h3 class="box-title">可展开容器</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default collapsed-box">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">可展开容器&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-plus">&LT;/i>&LT;/button>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    容器主体部分
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div>
  </div><!-- /.row -->
  <p>我们还可以向容器的工具条中添加标签、徽章、分页，工具提示，输入框中等工具.以下是一些示例:</p>
  <div class="row">
    <div class="col-md-4">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">标签</h3>
          <div class="box-tools pull-right">
            <span class="label label-default">一些标签</span>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">标签&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;span class="label label-default">8条新消息&LT;/span>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    容器主体部分
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div>
    <div class="col-md-4">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">输入框</h3>
          <div class="box-tools pull-right">
            <div class="has-feedback">
              <input type="text" class="form-control input-sm" placeholder="搜索...">
              <span class="glyphicon glyphicon-search form-control-feedback text-muted"></span>
            </div>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">输入框&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;div class="has-feedback">
        &LT;input type="text" class="form-control input-sm" placeholder="搜索...">
        &LT;span class="glyphicon glyphicon-search form-control-feedback">&LT;/span>
      &LT;/div>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    容器主体部分
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div>
    <div class="col-md-4">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">按钮工具</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
      </div><!-- /.box -->
      <pre class="prettyprint">
&LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">按钮工具&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
      &LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
    &LT;/div>&LT;!-- /.box-tools -->
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    容器主体部分
  &LT;/div>&LT;!-- /.box-body -->
&LT;/div>&LT;!-- /.box --></pre>
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p>
    如果你需要在 <code>app.js</code> 加载后去插入一个容器,
    你不得不通过调用  <code>.activateBox()</code> 方法显式的激活移除和关闭按钮的效果:
  </p>
  <pre class="prettyprint"><code class="html">&LT;script>
    $("#box-widget").activateBox();
&LT;/script></code></pre>

  <h4>加载状态</h4>
  <div class="row">
    <div class="col-md-6">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">加载状态</h3>
        </div>
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
        <!-- Loading (remove the following to stop the loading)-->
        <div class="overlay">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
        <!-- end loading -->
      </div><!-- /.box -->
    </div><!-- /.col -->

    <div class="col-md-6">
      <div class="box box-default box-solid">
        <div class="box-header with-border">
          <h3 class="box-title">加载状态 (.box-solid)</h3>
        </div>
        <div class="box-body">
          容器主体部分
        </div><!-- /.box-body -->
        <!-- Loading (remove the following to stop the loading)-->
        <div class="overlay">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
        <!-- end loading -->
      </div><!-- /.box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">
   将下面代码放置在 <code>.box</code> 元素的结束标记内,就可以容易的模拟一个加载状态.
  </p>
  <pre class="prettyprint"><code class="html">&LT;div class="overlay">
  &LT;i class="fa fa-refresh fa-spin">&LT;/i>
&LT;/div>
</code></pre>
  <h3 id="component-direct-chat">即时聊天</h3>
  <p class="lead">即时聊天组件通过扩展对容器组件进行扩展从而得到一个美观的聊天界面.
    该组件包括一个必选的消息会话面板和一个<b>可选的</b> 联系人面板. 示例:</p>
  <!-- 即时聊天 -->
  <div class="row">
    <div class="col-md-3">
      <!-- 主要聊天主体 -->
      <div class="box box-primary direct-chat direct-chat-primary">
        <div class="box-header with-border">
          <h3 class="box-title">即时聊天</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3条新消息" class="badge bg-light-blue">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="联系人" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- 这里加载对话 -->
          <div class="direct-chat-messages">
            <!-- 消息默认从左往右 -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">亚历山大·皮尔斯</span>
                <span class="direct-chat-timestamp pull-right">7月23日 下午2:00</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息图片"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                这个模板真的是免费的吗？难以置信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">莎拉·布洛克</span>
                <span class="direct-chat-timestamp pull-left">7月23日 下午2:05</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息图片"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                你最好相信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- 联系人加载到这里 -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="德古拉伯爵">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      德古拉伯爵
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">最近过得怎么样？我是...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="请输入消息 ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary btn-flat">发送</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->
    </div><!-- /.col -->

    <div class="col-md-3">
      <!-- 成功聊天主体 -->
      <div class="box box-success direct-chat direct-chat-success">
        <div class="box-header with-border">
          <h3 class="box-title">即时聊天</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3条新消息" class="badge bg-green">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="联系人" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- 这里加载对话 -->
          <div class="direct-chat-messages">
            <!-- 消息默认从左往右 -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">亚历山大·皮尔斯</span>
                <span class="direct-chat-timestamp pull-right">7月23日 下午2:00</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息图片"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                这个模板真的是免费的吗？难以置信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">莎拉·布洛克</span>
                <span class="direct-chat-timestamp pull-left">7月23日 下午2:05</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息图片"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                你最好相信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- 联系人加载到这里 -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="德古拉伯爵">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      德古拉伯爵
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">最近过得怎么样？我是...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="请输入消息 ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-success btn-flat">发送</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->

    </div><!-- /.col -->

    <div class="col-md-3">
      <!-- 警告聊天主体 -->
      <div class="box box-warning direct-chat direct-chat-warning">
        <div class="box-header with-border">
          <h3 class="box-title">即时聊天</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3条新消息" class="badge bg-yellow">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="联系人" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- 这里加载对话 -->
          <div class="direct-chat-messages">
            <!-- 消息默认从左往右 -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">亚历山大·皮尔斯</span>
                <span class="direct-chat-timestamp pull-right">7月23日 下午2:00</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息图片"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                这个模板真的是免费的吗？难以置信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">莎拉·布洛克</span>
                <span class="direct-chat-timestamp pull-left">7月23日 下午2:05</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息图片"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                你最好相信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- 联系人加载到这里 -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="德古拉伯爵">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      德古拉伯爵
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">最近过得怎么样？我是...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="请输入消息 ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-warning btn-flat">发送</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->

    </div><!-- /.col -->

    <div class="col-md-3">

      <!-- 危险聊天主体 -->
      <div class="box box-danger direct-chat direct-chat-danger">
        <div class="box-header with-border">
          <h3 class="box-title">即时聊天</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3条新消息" class="badge bg-red">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="联系人" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- 这里加载对话 -->
          <div class="direct-chat-messages">
            <!-- 消息默认从左往右 -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">亚历山大·皮尔斯</span>
                <span class="direct-chat-timestamp pull-right">7月23日 下午2:00</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息图片"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                这个模板真的是免费的吗？难以置信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">莎拉·布洛克</span>
                <span class="direct-chat-timestamp pull-left">7月23日 下午2:05</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息图片"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                你最好相信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- 联系人加载到这里 -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="德古拉伯爵">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      德古拉伯爵
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">最近过得怎么样？我是...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="请输入消息 ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-danger btn-flat">发送</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->

    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">及时聊天标签</p>
  <pre class="prettyprint"><code class="html">
&LT;!-- 定义你希望的容器风格. 这里我们使用了表示危险的容器风格 -->
&LT;!-- 这里添加类 direct-chat 并且选择 direct-chat-* 语境类型 -->
&LT;!-- 这个语境类型应当匹配容器风格, 因此我们使用 direct-chat-danger -->
&LT;div class="box box-danger direct-chat direct-chat-danger">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">即时聊天&LT;/h3>
    &LT;div class="box-tools pull-right">
      &LT;span data-toggle="tooltip" title="3条新消息" class="badge bg-red">3&LT;/span>
      &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
      &LT;!-- 如果你希望使用联系人面板,在容器的工具条中添加这个按钮 -->
      &LT;button class="btn btn-box-tool" data-toggle="tooltip" title="联系人" data-widget="chat-pane-toggle">&LT;i class="fa fa-comments">&LT;/i>&LT;/button>
      &LT;button class="btn btn-box-tool" data-widget="remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
    &LT;/div>
  &LT;/div>&LT;!-- /.box-header -->
  &LT;div class="box-body">
    &LT;!-- 在这里加载对话 -->
    &LT;div class="direct-chat-messages">
      &LT;!-- 消息默认从左往右 -->
      &LT;div class="direct-chat-msg">
        &LT;div class="direct-chat-info clearfix">
          &LT;span class="direct-chat-name pull-left">亚历山大·皮尔斯&LT;/span>
          &LT;span class="direct-chat-timestamp pull-right">7月23日 下午2:00&LT;/span>
        &LT;/div>&LT;!-- /.direct-chat-info -->
        &LT;img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户头像">&LT;!-- /.direct-chat-img -->
        &LT;div class="direct-chat-text">
          这个模板真的是免费的吗？难以置信!
        &LT;/div>&LT;!-- /.direct-chat-text -->
      &LT;/div>&LT;!-- /.direct-chat-msg -->

      &LT;!-- 靠右侧的消息 -->
      &LT;div class="direct-chat-msg right">
        &LT;div class="direct-chat-info clearfix">
          &LT;span class="direct-chat-name pull-right">莎拉·布洛克&LT;/span>
          &LT;span class="direct-chat-timestamp pull-left">7月23日 下午2:05&LT;/span>
        &LT;/div>&LT;!-- /.direct-chat-info -->
        &LT;img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户头像">&LT;!-- /.direct-chat-img -->
        &LT;div class="direct-chat-text">
          你最好相信!
        &LT;/div>&LT;!-- /.direct-chat-text -->
      &LT;/div>&LT;!-- /.direct-chat-msg -->
    &LT;/div>&LT;!--/.direct-chat-messages-->

    &LT;!-- Contacts are loaded here -->
    &LT;div class="direct-chat-contacts">
      &LT;ul class="contacts-list">
        &LT;li>
          &LT;a href="#">
            &LT;img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="德古拉伯爵">
            &LT;div class="contacts-list-info">
              &LT;span class="contacts-list-name">
                德古拉伯爵
                &LT;small class="contacts-list-date pull-right">2/28/2015&LT;/small>
              &LT;/span>
              &LT;span class="contacts-list-msg">最近过得怎么样？我是...&LT;/span>
            &LT;/div>&LT;!-- /.contacts-list-info -->
          &LT;/a>
        &LT;/li>&LT;!-- End Contact Item -->
      &LT;/ul>&LT;!-- /.contatcts-list -->
    &LT;/div>&LT;!-- /.direct-chat-pane -->
  &LT;/div>&LT;!-- /.box-body -->
  &LT;div class="box-footer">
    &LT;div class="input-group">
      &LT;input type="text" name="message" placeholder="请输入消息 ..." class="form-control">
      &LT;span class="input-group-btn">
        &LT;button type="button" class="btn btn-danger btn-flat">发送&LT;/button>
      &LT;/span>
    &LT;/div>
  &LT;/div>&LT;!-- /.box-footer-->
&LT;/div>&LT;!--/.direct-chat -->
</code></pre>

  <p>当然你也可以通过给容器添加 <code>solid-box</code> 类来使用实心聊天窗口. 这里展示了一些示例:</p>

  <!-- 实心容器聊天窗口 -->
  <div class="row">
    <div class="col-md-6">
      <!-- 主要风格了窗口 -->
      <div class="box box-primary box-solid direct-chat direct-chat-primary">
        <div class="box-header">
          <h3 class="box-title">实心容器中的聊天窗口</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3条新消息" class="badge bg-light-blue">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- 在这里加载对话 -->
          <div class="direct-chat-messages">
            <!-- 左侧消息 -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">亚历山大·皮尔斯</span>
                <span class="direct-chat-timestamp pull-right">7月23日 下午2:00 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                这个模板真的是免费的吗？难以置信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">莎拉·布洛克</span>
                <span class="direct-chat-timestamp pull-left">7月23日 下午2:05 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                你最好相信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="德古拉伯爵">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      德古拉伯爵
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">最近过的怎样? 我是...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="输入消息 ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary btn-flat">发送</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->
    </div><!-- /.col -->

    <div class="col-md-6">
      <!-- DIRECT CHAT DANGER -->
      <div class="box box-info box-solid direct-chat direct-chat-info">
        <div class="box-header">
          <h3 class="box-title">实心容器的聊天窗口</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3 New Messages" class="badge bg-aqua">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- Conversations are loaded here -->
          <div class="direct-chat-messages">
            <!-- Message. Default to the left -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">亚历山大·皮尔斯</span>
                <span class="direct-chat-timestamp pull-right">7月23日 下午2:00 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                这个模板真的是免费的吗？难以置信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">莎拉·布洛克</span>
                <span class="direct-chat-timestamp pull-left">7月23日 下午2:05 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                你最好相信!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="德古拉伯爵">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      德古拉伯爵
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">最近过的怎样? 我是...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <form action="#" method="post">
            <div class="input-group">
              <input type="text" name="message" placeholder="输入消息 ..." class="form-control">
              <span class="input-group-btn">
                <button type="button" class="btn btn-info btn-flat">发送</button>
              </span>
            </div>
          </form>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->
    </div><!-- /.col -->
  </div><!-- /.row -->
</section>


<!-- ============================================================= -->

<section id="plugins">
  <h2 class="page-header"><a href="#plugins">插件集</a></h2>
  <p class="lead">AdminLTE 集成了以下插件. 你可以通过下面的链接访问相关的文档，授权，更新等信息.</p>
  <div class="row bring-up">
    <div class="col-sm-3">
      <ul class="list-unstyled">
        <li><h4>图表</h4></li>
        <li><a href="http://www.chartjs.org/" target="_blank">ChartJS</a></li>
        <li><a href="http://www.flotcharts.org/" target="_blank">Flot</a></li>
        <li><a href="http://morrisjs.github.io/morris.js/" target="_blank">Morris.js</a></li>
        <li><a href="http://omnipotent.net/jquery.sparkline/" target="_blank">Sparkline</a></li>
      </ul>
    </div><!-- /.col -->
    <div class="col-sm-3">
      <ul class="list-unstyled">
        <li><h4>表单元素</h4></li>
        <li><a href="https://github.com/seiyria/bootstrap-slider/">Bootstrap Slider</a></li>
        <li><a href="http://ionden.com/a/plugins/ion.rangeSlider/en.html" target="_blank">Ion Slider</a></li>
        <li><a href="http://bootstrap-datepicker.readthedocs.org/" target="_blank">Date Picker</a></li>
        <li><a href="http://www.daterangepicker.com/" target="_blank">Date Range Picker</a></li>
        <li><a href="http://mjolnic.com/bootstrap-colorpicker/" target="_blank">Color Picker</a></li>
        <li><a href="https://github.com/jdewit/bootstrap-timepicker/" target="_blank">Time Picker</a></li>
        <li><a href="http://fronteed.com/iCheck/" target="_blank">iCheck</a></li>
        <li><a href="https://github.com/RobinHerbots/jquery.inputmask/" target="_blank">Input Mask</a></li>
      </ul>
    </div><!-- /.col -->
    <div class="col-sm-3">
      <ul class="list-unstyled">
        <li><h4>编辑器</h4></li>
        <li><a href="https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/" target="_blank">Bootstrap WYSIHTML5</a></li>
        <li><a href="http://ckeditor.com/" target="_blank">CK Editor</a></li>
      </ul>
    </div><!-- /. col -->
    <div class="col-sm-3">
      <ul class="list-unstyled">
        <li><h4>其它</h4></li>
        <li><a href="https://datatables.net/examples/styling/bootstrap.html" target="_blank">DataTables</a></li>
        <li><a href="http://fullcalendar.io/" target="_blank">Full Calendar</a></li>
        <li><a href="http://jqueryui.com/" target="_blank">jQuery UI</a></li>
        <li><a href="http://anthonyterrien.com/knob/" target="_blank">jQuery Knob</a></li>
        <li><a href="http://jvectormap.com/" target="_blank">jVector Map</a></li>
        <li><a href="http://rocha.la/jQuery-slimScroll/" target="_blank">Slim Scroll</a></li>
        <li><a href="http://github.hubspot.com/pace/docs/welcome/" target="_blank">Pace</a></li>
      </ul>
    </div><!-- /.col -->
  </div><!-- /.row -->
</section>


<!-- ============================================================= -->

<section id="browsers">
  <h2 class="page-header"><a href="#browsers">浏览器支持</a></h2>
  <p class="lead">AdminLTE 兼容以下浏览器:</p>
  <ul>
    <li>IE9+</li>
    <li>Firefox (最新版)</li>
    <li>Safari (最新版)</li>
    <li>Chrome (最新版)</li>
    <li>Opera (最新版)</li>
  </ul>
  <p><b>提示:</b> IE9 不支持转场动画. 在IE9中该模板可以正常显示,但不会有转场动画效果.</p>
</section>


<!-- ============================================================= -->

<section id="upgrade">
  <h2 class="page-header"><a href="#upgrade">升级指南</a></h2>
  <p class="lead">从 1.x  版升级至最新版, 请遵循以下说明.</p>
  <h3>新文件</h3>
  <p>请确保所有和 AdminLTE 相关的 CSS 和 JS 文件都进行更新. 否则,布局将无法正常工作.
    其中最重要的文件是 AdminLTE.css, 风格皮肤 CSS 文件, 和 app.js 文件.</p>
  <h3>布局变更</h3>
  <ol>
    <li>确认类为 .wrapper 的 div 标签必须被防止在 body 标签之后,并在 header 标签之前</li>
    <li>变更 .header 类的 div 标签为 .main-header <code>&LT;div class="main-header"></code></li>
    <li>变更 .right-side 类为 .content-wrapper <code>&LT;div class="content-wrapper"></code></li>
    <li>变更 .left-side 类为 .main-sidebar <code>&LT;div class="main-sidebar"></code></li>
    <li>在导航栏, 修改 .navbar-right 为 .navbar-custom-menu <code>&LT;div class="navbar-custom-menu"></code></li>
  </ol>
  <h3>导航栏自定义下拉菜单</h3>
  <ol>
    <li>通知图标按钮将不再先不要 bg-* 类. 他们需要被替换为上下文的文本样式颜色类,如 text-aqua 或 text-red.</li>
  </ol>
  <h3>登陆,注册,和锁屏页面</h3>
  <p>这些页面的 HTML 样式做出了较大幅度的改动. 最好的办法是复制这些代码并进行重新鼎业.</p>
  <p>并且你必须这么去做!</p>
  <h3>邮件容器</h3>
  <p>邮箱升级后包括收件箱,邮件查看和邮件编写三种不同的视图. 你可以通过 pages/mailbox 文件夹内提供的HTML文档进行使用.</p>
  <p><b class="text-red">提示:</b> 旧的邮件功能已经废弃,在下一个版本中会进行删除.</p>
</section>


<!-- ============================================================= -->

<section id="implementations">
  <h2 class="page-header"><a href="#implementations">程序实现</a></h2>
  <p class="lead">感谢支持和使用 AdminLTE 的用户, 有许多框架的后台对模板进行了易于实现的继承功能. 以下是其中一部分:</p>

  <ul>
    <li><a href="https://github.com/mmdsharifi/AdminLTE-RTL">Persian RTL</a> by <a href="https://github.com/mmdsharifi">Mohammad Sharifi</a></li>
    <li><a href="https://github.com/dmstr/yii2-adminlte-asset" target="_blank">Yii 2</a> by <a href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
    <li><a href="https://github.com/yajra/laravel-admin-template" target="_blank">Laravel</a> by <a href="https://github.com/yajra" target="_blank">Arjay Angeles</a></li>
    <li><a href="https://github.com/acacha/adminlte-laravel" target="_blank">Laravel 5 package</a> by <a href="https://github.com/acacha" target="_blank">Sergi Tur Badenas</a></li>
    <li><a href="https://github.com/jeroennoten/Laravel-AdminLTE" target="_blank">Laravel-AdminLTE</a> by <a href="https://github.com/jeroennoten" target="_blank">Jeroen Noten</a></li>
    <li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>
    <li>Rails gems: <a href="https://github.com/nicolas-besnard/adminlte2-rails" target="_blank">adminlte2-rails</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</a> and <a href="https://github.com/racketlogger/lte-rails" target="_blank">lte-rails</a> (using AdminLTE sources) by <a href="https://github.com/racketlogger" target="_blank">Carlos at RacketLogger</a></li>
  </ul>

  <p><b class="text-red">提示:</b> 以下实现并发模板官方提供的支持. 然而他们提供了如何将框架继承到程序中的很好的实力.
    查看 AdminLTE 的最新发行版请浏览 <a href="https://github.com/almasaeed2010/AdminLTE">GitHub仓库</a> 或者 <a href="https://almsaeedstudio.com">官方网站</a></p>
</section>


<!-- ============================================================= -->

<section id="faq">
  <h2 class="page-header"><a href="#faq">问题解答</a></h2>
  <h3>AdminLTE be 是否能被应用在 Wordpress?</h3>
  <p class="lead">AdminLTE 是一个 HTML 模板, 因此能够在任何地方进行使用. 然而它并没有提供 Wordpress 的傻瓜式安装包. 你需要做一些工作自行去编写 Wordpress 相关的脚本来进行支持.</p>

  <h3>是否有关于Yii 或 Symfony 等 PHP 框架的支持?</h3>
  <p class="lead">简短的回答是没有. 然而有一些分支项目和周边信息提供了继承到许多框架的教程说明. 他们甚至有 AdminLTE 继承 jQuery ajax, AngularJS 以及 MVC5 ASP .NET的说明.</p>

  <h3>如何得知 AdminLTE 的最新版本?</h3>
  <p class="lead">最好的方式是订阅官方的邮件列表<a href="http://almsaeedstudio.com/#subscribe">Almsaeed Studio</a>.
    如果你不希望这么做的话还可以查看 <a href="https://github.com/almasaeed2010/AdminLTE">GitHub仓库</a> 或者浏览 <a href="http://almsaeedstudio.com">官方网站</a> 了解最新信息.</p>
</section>


<!-- ============================================================= -->

<section id="license">
  <h2 class="page-header"><a href="#license">许可</a></h2>
  <h3>AdminLTE</h3>
  <p class="lead">
    AdminLTE 是一个开源项目,以 <a href="http://opensource.org/licenses/MIT">MIT license</a> 授权协议进行发布.
    这代表你可以做几乎任何你想做的事情,即使是不包括授权申明 (当然我们希望包括).
  </p>
</section>


        </div><!-- /.content -->
      </div><!-- /.content-wrapper -->

      <footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>Version</b> 2.3.12
        </div>
        <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>

      <!-- Control Sidebar -->
      <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <div class="pad">
          这是控制侧边栏的示例.
        </div>
      </aside><!-- /.control-sidebar -->
      <!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
      <div class="control-sidebar-bg"></div>

    </div><!-- ./wrapper -->

    <!-- jQuery 2.2.3 -->
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="../plugins/fastclick/fastclick.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../dist/js/app.min.js"></script>
    <!-- SlimScroll 1.3.0 -->
    <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="./resource/run_prettify.js"></script>
    <script src="docs.js"></script>
  </body>
</html>
